<template>
  <div>
    <el-table :data="groupData">
      <el-table-column label="id" align="center" prop="id" v-if="false" />
      <el-table-column label="序号" type="index" align="center" width="50" />
      <el-table-column label="分组" prop="name" />
      <el-table-column label="开启" align="center" width="90">
        <template #default="scope">
          <el-button icon="Select" size="small" type="primary" plain @click="switchChange('1', scope.row)">开</el-button>
        </template>
      </el-table-column>
      <el-table-column label="关闭" align="center" width="90">
        <template #default="scope">
          <el-button icon="CloseBold" size="small" type="primary" plain @click="switchChange('0', scope.row)">关</el-button>
        </template>
      </el-table-column>
      <el-table-column label="调光" align="center" width="300">
        <template #default="scope">
          <el-slider v-model="scope.row.sl" :max="100" :min="0" @change="switchChange('2', scope.row)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { serviceInvoke, getDevicesDetail } from '../api/devices.api'

const props = defineProps<{ row: any }>()

const state = reactive({
  sw: 0,
  sl: 0,
  swName: '',
  slName: '',
  num: '',
  operate: ''
})

// 获取列表数据
const groupData = ref<any[]>([])
const getData = () => {
  getDevicesDetail(props.row.deviceId)
  .then((res) => {
    const groupDataValue = res.data.property?.group_value.value.group
    groupData.value = JSON.parse(groupDataValue)
  })
}

// 开关调光按钮
const switchChange = async (operate, row) => {
  if (operate == '1' || operate == 1) {
    state.sl = 100
  } else {
    state.sl = row.sl || ''
  }
  serviceInvoke({
    deviceId: props.row.deviceId,
    args: {
      Bright: state.sl || '',
      Num: row.id,
      Operate: operate
    },
    service: 'Group_Operate'
  }).then((res) => {
    if (res.code === 200) {
      ElMessage({
        type: 'success',
        message: '设置成功',
      })
    } else {
      ElMessage.error(res.message)
    }
  })
}

onMounted(() => {
  getData()
})
</script>